<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
    import echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    export default {
    name: "BarChart3",
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '300px'
        }
    },
    data() {
        return {
            chart: null
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        
        initChart(){
            let _this = this;
            _this.chart = echarts.init(_this.$el, 'macarons');
            let option = {
                  tooltip: {
                  trigger: 'axis',
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                 }
                 },
                 grid: {
                     top: 10,
                     left: '2%',
                     right: '2%',
                     bottom: '3%',
                     containLabel: true
                  },
                xAxis: {
                    type: 'category',
                     data: ['物种总数', '有CasNO', 'Spectrum数据', '化学网数据'],
                      axisTick: {
                        alignWithLabel: true
                       }
                 },
                yAxis: {
                    type: 'value',
                    axisTick: {
                      show: false
                     }
                 },
                series: [
               {
                  data: [
                    {
                        value: 144681,
                        itemStyle: {
                           color: '#BE4432'
                        }
                    },
                    {
                        value: 63115,
                        itemStyle: {
                         color:  '#4D3D4E'
                        }
                    },
                     {
                        value: 32400,
                        itemStyle: {
                         color: '#485B55'
                        }
                    },
                     {
                        value: 53556,
                        itemStyle: {
                         color: '#293742'
                        }
                    },
     
                      ],
                   type: 'bar',
                   stack: 'vistors',
                   barWidth: '50%',
                }
                ]}
            this.chart.setOption(option)
        }
   
    }
};
</script>

<style scoped>

</style>